<h3>执行端表格</h3>
<d-button (btnClick)="addData()">添加数据</d-button>
<d-data-table
  #dataTable
  [dataSource]="dataList"
  [tableOverflowType]="'overlay'"
  [scrollable]="true"
  [fixHeader]="true"
  tableHeight="15vh"
>
  <thead dTableHead>
    <tr dTableRow>
      <th dHeadCell>序号</th>
      <th dHeadCell>标识</th>
      <th dHeadCell>IP:端口</th>
      <th dHeadCell>创建日期</th>
      <th dHeadCell>更新日期</th>
      <th dHeadCell>操作</th>
    </tr>
  </thead>
  <tbody dTableBody>
    <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex">
      <tr dTableRow>
        <td dTableCell [rowItem]="rowItem" [field]="'index'">
          <span>{{ rowIndex + 1 }}</span>
        </td>
        <td dTableCell [rowItem]="rowItem" [field]="'id'">
          <span>{{ rowItem?.id }}</span>
        </td>
        <td
          dTableCell
          [editable]="true"
          [editableTip]="editableTip"
          [(editing)]="rowItem['ipPortEdit']"
          [rowItem]="rowItem"
          [field]="'ipPort'"
          [beforeEditStart]="beforeEditStart"
          [beforeEditEnd]="beforeEditEnd"
        >
          <span *ngIf="!rowItem['ipPortEdit']">{{ rowItem?.ipPort }}</span>
          <input
            *ngIf="rowItem['ipPortEdit']"
            [dAutoFocus]="true"
            class="devui-form-control"
            name="ipPort"
            [(ngModel)]="rowItem.ipPort"
            [attr.maxlength]="100"
            [attr.minlength]="3"
          />
        </td>
        <td dTableCell [rowItem]="rowItem" [field]="'createTime'">
          <span>{{ rowItem?.createTime | i18nDate : "full" : false }}</span>
        </td>
        <td dTableCell [rowItem]="rowItem" [field]="'updateTime'">
          <span>{{ rowItem?.updateTime | i18nDate : "full" : false }}</span>
        </td>
        <td dTableCell>
          <d-button bsStyle="text" (btnClick)="deleteData(rowItem?.id)"
            >删除</d-button
          >
        </td>
      </tr>
    </ng-template>
  </tbody>
</d-data-table>
